<template>
  <div>
    <!--
      $set
      Vue2缺点：
         对象的原有属性修改是响应式的，新增属性修改它并非响应式
         this.$set(对象,key,修改后的值)
         数组：能修改原始数组的方法调用是响应式的 push....,直接修改值并非响应式
         this.$set(数组,下标,修改后的值)
      Vue3无这种问题

     -->
    <h3>{{ obj }}</h3>
    <button @click="setObj">修改obj</button>
    <hr>
    <h3>{{ arr }}</h3>
    <button @click="setArr">修改arr</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        name: '张三'
      },
      arr: [1, 2, 3]
    }
  },
  methods: {
    setObj() {
      // this.obj.name = '李四'
      // this.obj.age = 18
      this.$set(this.obj, 'age', 18)
      console.log(this.obj)
    },
    setArr() {
      // this.arr[0] = 999
      // this.arr.splice(0, 1, 999)
      this.$set(this.arr, 0, 999)
    }
  }
}
</script>
<style></style>
